diff options
Diffstat (limited to 'pages/en/manga/read/[...params].js')
| -rw-r--r-- | pages/en/manga/read/[...params].js | 202 |
1 files changed, 167 insertions, 35 deletions
diff --git a/pages/en/manga/read/[...params].js b/pages/en/manga/read/[...params].js index a7769e2..1076601 100644 --- a/pages/en/manga/read/[...params].js +++ b/pages/en/manga/read/[...params].js @@ -10,13 +10,27 @@ import { authOptions } from "../../../api/auth/[...nextauth]"; import BottomBar from "@/components/manga/mobile/bottomBar"; import TopBar from "@/components/manga/mobile/topBar"; import Head from "next/head"; -import nookies from "nookies"; import ShortCutModal from "@/components/manga/modals/shortcutModal"; import ChapterModal from "@/components/manga/modals/chapterModal"; -import getAnifyPage from "@/lib/anify/page"; +// import getConsumetPages from "@/lib/consumet/manga/getPage"; +import { mediaInfoQuery } from "@/lib/graphql/query"; +// import { redis } from "@/lib/redis"; +// import getConsumetChapters from "@/lib/consumet/manga/getChapters"; +import { toast } from "sonner"; +import axios from "axios"; +import { redis } from "@/lib/redis"; +import getAnifyInfo from "@/lib/anify/info"; -export default function Read({ data, currentId, sessions }) { - const [info, setInfo] = useState(); +export default function Read({ + data, + info, + chaptersData, + currentId, + sessions, + provider, + mangaDexId, + number, +}) { const [chapter, setChapter] = useState([]); const [layout, setLayout] = useState(1); @@ -30,8 +44,8 @@ export default function Read({ data, currentId, sessions }) { const [paddingX, setPaddingX] = useState(208); const [scaleImg, setScaleImg] = useState(1); - const [nextChapterId, setNextChapterId] = useState(null); - const [prevChapterId, setPrevChapterId] = useState(null); + const [nextChapter, setNextChapter] = useState(null); + const [prevChapter, setPrevChapter] = useState(null); const [currentChapter, setCurrentChapter] = useState(null); const [currentPage, setCurrentPage] = useState(0); @@ -40,17 +54,22 @@ export default function Read({ data, currentId, sessions }) { const router = useRouter(); + // console.log({ info }); + useEffect(() => { - hasRun.current = false; - }, [currentId]); + toast.message("This page is still under development", { + description: "If you found any bugs, please report it to us!", + position: "top-center", + duration: 10000, + }); + }, []); useEffect(() => { - const get = JSON.parse(localStorage.getItem("manga")); - const chapters = get.manga; + hasRun.current = false; + const chapters = chaptersData.find((x) => x.providerId === provider); const currentChapter = chapters.chapters?.find((x) => x.id === currentId); setCurrentChapter(currentChapter); - setInfo(get.data); setChapter(chapters); if (Array.isArray(chapters?.chapters)) { @@ -60,25 +79,36 @@ export default function Read({ data, currentId, sessions }) { if (currentIndex !== -1) { const nextChapter = chapters.chapters[currentIndex - 1]; const prevChapter = chapters.chapters[currentIndex + 1]; - setNextChapterId(nextChapter ? nextChapter.id : null); - setPrevChapterId(prevChapter ? prevChapter.id : null); + setNextChapter(nextChapter ? nextChapter : null); + setPrevChapter(prevChapter ? prevChapter : null); } } + + // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentId]); useEffect(() => { const handleKeyDown = (event) => { - if (event.key === "ArrowRight" && event.ctrlKey && nextChapterId) { + event.preventDefault(); + if (event.key === "ArrowRight" && event.ctrlKey && nextChapter?.id) { router.push( - `/en/manga/read/${chapter.providerId}?id=${ - info.id - }&chapterId=${encodeURIComponent(nextChapterId)}` + `/en/manga/read/${ + chapter.providerId + }?id=${mangaDexId}&chapterId=${encodeURIComponent(nextChapter?.id)}${ + info?.id?.length > 6 ? "" : `&anilist=${info?.id}` + }&num=${nextChapter?.number}` ); - } else if (event.key === "ArrowLeft" && event.ctrlKey && prevChapterId) { + } else if ( + event.key === "ArrowLeft" && + event.ctrlKey && + prevChapter?.id + ) { router.push( - `/en/manga/read/${chapter.providerId}?id=${ - info.id - }&chapterId=${encodeURIComponent(prevChapterId)}` + `/en/manga/read/${ + chapter.providerId + }?id=${mangaDexId}&chapterId=${encodeURIComponent(prevChapter?.id)}${ + info?.id?.length > 6 ? "" : `&anilist=${info?.id}` + }&num=${prevChapter?.number}` ); } if (event.code === "Slash" && event.ctrlKey) { @@ -99,7 +129,9 @@ export default function Read({ data, currentId, sessions }) { return () => { window.removeEventListener("keydown", handleKeyDown); }; - }, [nextChapterId, prevChapterId, visible, isKeyOpen, paddingX]); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [nextChapter?.id, prevChapter?.id, visible, isKeyOpen, paddingX]); return ( <> @@ -134,13 +166,15 @@ export default function Read({ data, currentId, sessions }) { <TopBar info={info} /> <BottomBar id={info?.id} - prevChapter={prevChapterId} - nextChapter={nextChapterId} + prevChapter={prevChapter} + nextChapter={nextChapter} currentPage={currentPage} chapter={chapter} - page={data} + data={data} setSeekPage={setSeekPage} setIsOpen={setIsChapOpen} + number={number} + mangadexId={mangaDexId} /> </> )} @@ -149,13 +183,17 @@ export default function Read({ data, currentId, sessions }) { data={chapter} page={data} info={info} + number={number} + mediaId={mangaDexId} currentId={currentId} setSeekPage={setSeekPage} + providerId={provider} /> )} {layout === 1 && ( <FirstPanel aniId={info?.id} + providerId={provider} data={data} hasRun={hasRun} currentId={currentId} @@ -164,19 +202,22 @@ export default function Read({ data, currentId, sessions }) { visible={visible} setVisible={setVisible} chapter={chapter} - nextChapter={nextChapterId} - prevChapter={prevChapterId} + nextChapter={nextChapter} + prevChapter={prevChapter} paddingX={paddingX} session={sessions} mobileVisible={mobileVisible} setMobileVisible={setMobileVisible} setCurrentPage={setCurrentPage} + mangadexId={mangaDexId} + number={number} /> )} {layout === 2 && ( <SecondPanel aniId={info?.id} data={data} + chapterData={chapter} hasRun={hasRun} currentChapter={currentChapter} currentId={currentId} @@ -185,12 +226,14 @@ export default function Read({ data, currentId, sessions }) { visible={visible} setVisible={setVisible} session={sessions} + providerId={provider} /> )} {layout === 3 && ( <ThirdPanel aniId={info?.id} data={data} + chapterData={chapter} hasRun={hasRun} currentId={currentId} currentChapter={currentChapter} @@ -202,6 +245,7 @@ export default function Read({ data, currentId, sessions }) { scaleImg={scaleImg} setMobileVisible={setMobileVisible} mobileVisible={mobileVisible} + providerId={provider} /> )} {visible && ( @@ -224,42 +268,130 @@ export default function Read({ data, currentId, sessions }) { )} </div> </> + // <p></p> ); } -export async function getServerSideProps(context) { - const cookies = nookies.get(context); +async function fetchAnifyPages(id, number, provider, readId, key) { + try { + let cached; + cached = await redis.get(`pages:${readId}`); + + if (cached) { + return JSON.parse(cached); + } + + const url = `https://api.anify.tv/pages?id=${id}&chapterNumber=${number}&providerId=${provider}&readId=${encodeURIComponent( + readId + )}`; + + const { data } = await axios.get(url); + + if (!data) { + return null; + } + + await redis.set( + `pages:${readId}`, + JSON.stringify(data), + "EX", + 60 * 60 * 24 * 7 + ); + + return data; + } catch (error) { + return { error: "Error fetching data" }; + } +} + +export async function getServerSideProps(context) { const key = process.env.API_KEY; const query = context.query; const providerId = query.params[0]; const chapterId = query.chapterId; const mediaId = query.id; + const number = query.num; + const anilistId = query.anilist; + + const session = await getServerSession(context.req, context.res, authOptions); + const accessToken = session?.user?.token || null; + + // const data = await getConsumetPages(mediaId, providerId, chapterId, key); + // const chapters = await getConsumetChapters(mediaId, redis); + + const dataManga = await fetchAnifyPages( + mediaId, + number, + providerId, + chapterId, + mediaId, + key + ); + + let info; - if (!cookies.manga || cookies.manga !== mediaId) { + if (anilistId) { + const response = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + ...(accessToken && { Authorization: `Bearer ${accessToken}` }), + }, + body: JSON.stringify({ + query: mediaInfoQuery, + variables: { + id: parseInt(anilistId), + type: "MANGA", + }, + }), + }); + const json = await response.json(); + info = json?.data?.Media; + } else { + const datas = await getAnifyInfo(mediaId); + if (datas) { + info = datas; + } + } + + const chapters = await ( + await fetch("https://api.anify.tv/chapters/" + mediaId + "?apikey=" + key) + ).json(); + + if ((dataManga && dataManga?.error) || dataManga?.length === 0) { return { redirect: { - destination: `/en/manga/${mediaId}`, + destination: `/en/manga/${anilistId}?chapter=404`, }, }; } - const session = await getServerSession(context.req, context.res, authOptions); - - const data = await getAnifyPage(mediaId, providerId, chapterId, key); + /* + const { data } = await axios.get( + `https://beta.moopa.live/api/v2/info/${romaji}${ + english ? `/${english}` : "" + }${native ? `/${native}` : ""}?id=${anilistId}` + ); if (data.error) { return { notFound: true, }; } + */ return { props: { - data: data, + data: dataManga, + mangaDexId: mediaId, + info: info, + number: number, + chaptersData: chapters, currentId: chapterId, sessions: session, + provider: providerId, }, }; } |